<!--
*- coding = utf-8 -*-
#@Time : 2022/10/13 15:55
#@Author : CSDN 沉默小管
#@File : useClass.ts
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
<!--  <div class="image-lazy u-f u-f-ac u-f-ajc" v-bind="attrs" :style="props.imgList.length>0?'cursor:pointer':''" @click="handleCheckImg">-->
  <div class="image-lazy u-f u-f-ac u-f-ajc" v-bind="attrs" :style="true?'cursor:pointer':''" @click="handleCheckImg">
    <template v-if="imgStatus.isLoading">
      <div class="u-f u-f-ac u-f-ajc" style="z-index:10;position: absolute;width:100%;height:100%;">
        <Loading :primaryColor="props.loadingColor"/>
      </div>
    </template>

    <template v-if="imgStatus.loadingStatus">
      <div style="min-width: 50px;width:100%;" class="u-f u-f-ac u-f-ajc">
        <template v-if="props.lazy">
          <img
              class="image-lazy-item"
              :key="props.key"
              :style="props.imgStyle"
              ref="imgRef"
          />
        </template>
        <template v-else>
          <img
              class="image-lazy-item"
              :key="props.key"
              :style="props.imgStyle"
              :src="props.src"
              ref="imgRef"
          />
        </template>
      </div>
    </template>
    <template v-else>
      <template v-if="error">
        <slot name="error"/>
      </template>
      <template v-else>
        <i :style="'font-size:58px;color:'+props.errorColor" class="icon image-lazy-iconfont icon-tupianjiazaishibai"></i>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import Loading from "./cpns/loading/index"
import {useFunc} from "./hooks/useFunc";

const props = defineProps({
  imgList: {//有图片列表，暂时图片查看
    type:  Array,
    default: []
  },
  src: {//图片路径
    type:  String,
    default: ""
  },
  loadingColor:{//加载图标主题颜色
    type:  String,
    default: "#2dbff1"
  },
  errorColor:{//加载图标主题颜色
    type:  String,
    default: "#888888"
  },
  imgStyle:{//图片样式
    type:  String,
    default: ""
  },
  isShowImgDialog:{//是否显示图片查看弹出框
    type:Boolean,
    default:true
  },
  lazy:{//是否开启懒加载
    type:Boolean,
    default:true
  },
  key:{//图片索引
    type:[String,Number],
    default:0,
  }
})

let {attrs,error,imgStatus,imgRef,handleCheckImg} = useFunc(props)

</script>

<style scoped lang="less">
.image-lazy{
  position:relative;
  &-item{
    height:100%;
    width:100%;
  }
}
</style>
